﻿<!DOCTYPE html>
{% load staticfiles %}
<html>
	<head>
		<meta charset="utf-8" />
		<title>高大上租房网 -发布房屋信息</title>
		<link type="text/css" rel="stylesheet" href="{% static 'css/style.css' %}">
		<style type="text/css">
			.addbutton, .minusbutton { width: 30px; height: 30px; font-size: 18px; }
			.minusbutton { margin-left: 5px; }
			td img { margin:5px 5px; }
			#headbar { position: relative; top: 5px; left: 350px; }
            #headbar a { vertical-align: bottom; text-decoration: none; }
			.count { display: inline-block; width: 25px; height: 25px; opacity: 0.7; background-color: black; position: relative; left: 60px; top: -40px; }
			.pub { display: inline-block; margin-left: 35px; background-color: rgb(180,0,5); height: 36px; }
			.pub a { display: inline-block; text-decoration: none; width: 125px; height: 36px; text-align: center; font-size: 16px; line-height: 36px; }
			.pub a:visited, .pub a:link { color: white; }
		</style>
	</head>
	<body>
		{% include 'header.html' %}
		<div id="regLogin" class="wrap">
			<div class="dialog">
				<dl class="clearfix">
					<dt>新房屋信息发布</dt>
					<dd class="past">填写房屋信息</dd>
				</dl>
				<div class="box">
					<form action="/rent/publish/" method="post" enctype="multipart/form-data">
						{% csrf_token %}
                        <div style="color:red;">{{hint}}</div>
						<div class="infos">
							<table class="field">
								<tr>
									<td class="field">标 题：</td>
									<td><input type="text" class="text" name="title"></td>
								</tr>
								<tr>
									<td class="field">户 型：</td>
									<td>
										<select class="text" name="type" id="types">
											<option value="0">请选择</option>
										</select>
								   </td>
								</tr>
								<tr>
									<td class="field">面 积：</td>
									<td><input type="number" class="mtext" name="area"></td>
								</tr>
								<tr>
									<td class="field">楼 层：</td>
									<td>
										<input type="number" class="stext" name="floor" maxlength="3">
										/
										<input type="number" class="stext" name="totalfloor" maxlength="3">
									</td>
								</tr>
								<tr>
									<td class="field">朝向：</td>
									<td><input type="number" class="mtext" name="direction"></td>
								</tr>
								<tr>
									<td class="field">价 格：</td>
									<td>
										<input type="number" class="mtext" name="price">
										<input type="hidden" name="priceunit" value="元/月">
									</td>
								</tr>
		                        <tr>
									<td class="field">省市区：</td>
									<td>	
										<select id="prov" class="text">
											<option value="0">请选择</option>
										</select>
										<select id="city" class="text" disabled>
											<option value="0">请选择</option>
										</select>
										<select id="dist" class="text" name="district" disabled>
											<option value="0">请选择</option>
										</select>
		                            </td>
								</tr>
								<tr>
									<td class="field">街 道：</td>
									<td>
										<input type="text" name="street" class="text">
									</td>
								</tr>
								<tr>
									<td class="field">楼 盘：</td>
									<td>
										<select id="estate" class="text" name="estate">
											<option value="0">请选择</option>
										</select>
									</td>
								</tr>
								<tr>
									<td class="field">其 他：</td>
									<td>
										<input type="checkbox" name="hassubway">地铁
										<input type="checkbox" name="isshared">支持合租
										<input type="checkbox" name="hasagentfees">中介费
									</td>
								</tr>
								<tr>
									<td class="field">上传图片：</td>
									<td>
										<input id="file" type="file" class="text" name="mainphoto" multiple>
										<input id="addbutton" type="button" value="+" class="addbutton">
									</td>
								</tr>
								<tr>
									<td class="field">图片预览：</td>
									<td id="prevArea"><img id="housePhoto" src="" alt="" width="160" height="120"></td>
								</tr>
		                        <tr>
									<td class="field">详细信息：</td>
									<td><textarea name="detail"></textarea></td>
								</tr>
							</table>
							<div class="buttons"><input type="submit" value="立即发布"></div>
						</div>
					</form>
				</div>
			</div>
		</div>
		{% include 'footer.html' %}
		<script type="text/javascript" src="{% static 'js/jquery.min.js' %}"></script>
		<script type="text/javascript">
			$(function() {
				$('#addbutton').on('click', function() {
					var tr = $(this).parent().parent();
					var img = $('<img>').attr('width', 160).attr('height', 120);
					$('#prevArea').append(img);
					var newTr = $('<tr>');
					var newTd1 = $('<td class="field"></td>');
					var newTd2 = $('<td>');
					var fileInput = $('<input type="file" name="photo" class="text"/>');
					fileInput.on('change', function() {
						doPreview(this, img);
					});
					var minusButton = $('<input type="button" value="-" class="minusbutton"/>');
					minusButton.on('click', function() {
						newTr.remove();
						img.remove();
					});
					newTd2.append(fileInput);
					newTd2.append(minusButton);
					newTr.append(newTd1);
					newTr.append(newTd2);
					tr.after(newTr);
				});
				
				$('#file').on('change', function() {
					doPreview(this, $('#housePhoto'));
				});
			
			});
			
			function doPreview(source, target) {
				var file = source.files[0];
				if(/image\/\w+/.test(file.type)) {
					if(window.FileReader) {
						var fr = new FileReader();
						fr.onloadend = function() {
							target.attr('src', this.result);
						};
						fr.readAsDataURL(file);
					}
				} else {
					alert("只能选择图片文件");
					source.value = "";
					target.attr('src', '');
				}
			}
		</script>
	</body>
</html>